<template>
  <div class="matrix-view-origin">
    <el-descriptions :column="1" :colon="false">
      <template slot="title">
        <svg-icon icon-class="wave-square-rounded" />
        <span>指标设置（列）</span>
      </template>
      <el-descriptions-item label="数据模型">{{ origin.$tableId || '--' }}</el-descriptions-item>
      <el-descriptions-item label="指标字段">{{ origin.$field || '--' }}</el-descriptions-item>
      <el-descriptions-item label="聚合方式">{{ origin.$summary || '--' }}</el-descriptions-item>
      <el-descriptions-item label="数据格式">{{ format }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="1" class="mvo-dimesions">
      <template slot="title">
        <svg-icon icon-class="wave-square-rounded" />
        <span>维度设置</span>
      </template>
      <el-descriptions-item label="数据中表示细分纬度的列">
        <el-tag v-for="(item, i) in dimensions" :key="i" class="mt-2">{{ item }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="1" class="mvo-filters" :colon="false">
      <template slot="title">
        <svg-icon icon-class="wave-square-rounded" />
        <span>数据筛选</span>
      </template>
      <el-descriptions-item label="">
        <el-table :data="filters" style="width: 100%" border>
          <el-table-column prop="name" label="维度" />
          <el-table-column prop="term" label="操作符" />
          <el-table-column prop="value" label="筛选值" />
        </el-table>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="1" :colon="false">
      <template slot="title">
        <svg-icon icon-class="wave-square-rounded" />
        <span>时间设置</span>
      </template>
      <el-descriptions-item label="时间维度">{{ origin.$dateDimension || '--' }}</el-descriptions-item>
      <el-descriptions-item label="时间粒度">{{ origin.$dateStyle || '--' }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
import { get } from 'lodash'
import { requestMatrixOriginGet } from '@/api/chart/origin'

const TERM_DICT = {
  eq: '等于',
  not_eq: '不等于',
  lt: '小于',
  gt: '大于',
  le: '小于等于',
  ge: '大于等于',
  like: '包含',
  not_like: '不包含',
  empty: '空字符串',
  not_empty: '非空字符串',
  null: '为空',
  not_null: '不为空',
}

export default {
  data() {
    return {
      origin: {},
    }
  },
  computed: {
    format() {
      let ret = ''
      const cate = get(this.origin, 'formatterCfg.type')

      if (cate === 'percent') {
        ret = '百分比'
      } else if (cate === 'value') {
        ret = '数值'
      } else if (cate === 'auto') {
        ret = '自动'
      }

      return ret
    },
    dimensions() {
      const ret = []
      const dict = {}
      for (const item of this.origin.dimensions || []) {
        dict[item.id] = item.name
      }

      for (const id of this.origin.dimension || []) {
        ret.push(dict[id])
      }

      return ret
    },
    filters() {
      return (this.origin.filters || []).map((item) => ({
        name: item.name,
        term: TERM_DICT[item.filter[0].term],
        value: item.filter[0].value,
      }))
    },
  },
  created() {
    this.loadConfig(this.$route.params.id)
  },
  methods: {
    async loadConfig(matrixId) {
      try {
        const { success, data } = await requestMatrixOriginGet(matrixId)
        if (success) {
          this.origin = data
          this.$emit('change', data)
        }
      } catch (error) {
        console.log(error)
      }

      return {}
    },
  },
}
</script>
<style lang="scss" scoped>
.matrix-view-origin {
  padding: 20px;

  ::v-deep .el-descriptions {
    margin-top: 16px;
    .el-descriptions__header {
      margin-bottom: 12px;
      .el-descriptions__title {
        display: flex;
        align-items: center;
        .svg-icon {
          font-size: 20px;
          margin-right: 8px;
        }
      }
    }

    .el-descriptions__body {
      padding-left: 16px;

      .el-descriptions-item__content {
        display: block;
        .el-tag {
          margin-bottom: 8px;
          &:not(:last-child) {
            margin-right: 8px;
          }
        }
      }
    }
  }

  .mvo-dimesions,
  .mvo-filters {
    ::v-deep .el-descriptions-item__container {
      flex-direction: column;
    }
  }
}
</style>
